<template>
	<view>
		<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
		<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
		<view class="body after-navber">
        <view class="flex-y-center flex-x-center" style="height: 100upx;border-bottom: 1upx solid #e3e3e3;border-top: 1upx solid #e3e3e3;position: absolute;top: 0;width: 100%;z-index: 999;background: #EFEFF4">
            <navigator class="flex-y-center flex-x-center fs-sm" style="width: 700upx;height: 60upx;background: #fff;border: 1upx solid #e3e3e3; border-radius: 10upx;text-align: center;color: #b2b2b2" url="/pages/search/search">
                <image :src="data.__wxapp_img.search.search.url" style="width:24upx;height: 24upx;margin-right:10upx "></image>
                <text>搜索</text>
            </navigator>
        </view>
        <view style="height: 100%;padding-top: 100upx;background: #fff" v-if="data.dapp.cat_style==1||data.dapp.cat_style==3">
            <scroll-view class="cat-block-list big" scrollY="true" style="padding: 20upx 24upx;height: 100%" v-if="data.dapp.cat_style==1">
                <block v-for="(item,index) in data.cat_list" :key="item.id">
                    <navigator class="cat-block flex-row" :url="'/pages/list/list?cat_id='+item.id">
                        <image :src="item.big_pic_url" style="width: 100%;height: 100%"></image>
                    </navigator>
                    <block v-if="item.list&&item.list.length>0">
                        <navigator class="cat-block flex-row" :url="'/pages/list/list?cat_id='+items.id" v-for="(items,i) in item.list" :key="items.id">
                            <image :src="items.big_pic_url" style="width: 100%;height: 100%"></image>
                        </navigator>
                    </block>
                </block>
            </scroll-view>
            <scroll-view class="cat-block-list" scrollY="true" style="padding: 20upx 24upx;height: 100%" v-if="data.dapp.cat_style==3">
                <view class="cat-small-style cat-num-4 flex-row">
                    <block v-for="(item,index) in data.cat_list" :key="item.id">
                        <view class="flex-grow-0">
                            <navigator class="cat-item" :url="'/pages/list/list?cat_id='+item.id">
                                <image class="cat-icon" :src="item.pic_url"></image>
                                <view class="cat-name">{{item.name}}</view>
                            </navigator>
                        </view>
                        <block v-if="item.list&&item.list.length>0">
                            <view class="flex-grow-0" v-for="(items,i) in item.list" :key="items.id">
                                <navigator class="cat-item" :url="'/pages/list/list?cat_id='+items.id">
                                    <image class="cat-icon" :src="items.pic_url"></image>
                                    <view class="cat-name">{{items.name}}</view>
                                </navigator>
                            </view>
                        </block>
                    </block>
                </view>
            </scroll-view>
        </view>
        <view class="flex-row" style="height: 100%;padding-top: 100upx" v-if="data.dapp.cat_style==2||data.dapp.cat_style==4">
            <view class="flex-grow-0" style="height:100%;background: #fff">
                <scroll-view class="cat-list" scrollY="true" style="height: 100%;width: 204upx">
                    <view @tap="catItemClick" :class="['cat-item', item.active?'active':'', 'flex-y-center flex-x-center']" :data-index="index" v-for="(item,index) in data.cat_list" :key="item.id">
                        <view class="cat-name">{{item.name}}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="flex-grow-1" style="background: #f6dae1">
                <view style="position: fixed;top: 100upx;left: 200upx;bottom: 0;right: 0;z-index:0;overflow: hidden">
                    <scroll-view class="sub-cat-box cat-block-list" :scrollTop="data.sub_cat_list_scroll_top" scrollY="true" style="height: 100%;padding: 20upx;padding-bottom: 115upx">
                        <view style="padding-bottom: 115upx" v-if="data.dapp.cat_style==2">
                            <block v-if="data.current_cat">
                                <navigator class="cat-block flex-row" :url="'/pages/list/list?cat_id='+item.id" v-for="(item,index) in data.current_cat.list" :key="item.id">
                                    <image :src="item.big_pic_url" style="width: 100%;height: 100%"></image>
                                </navigator>
                            </block>
                        </view>
                        <view class="cat-small-style cat-num-3 flex-row" v-if="data.dapp.cat_style==4">
                            <block v-if="data.current_cat">
                                <navigator class="advert" :url="data.current_cat.advert_url" v-if="data.current_cat.advert_pic">
                                    <image class="cat-icon" :src="data.current_cat.advert_pic"></image>
                                </navigator>
                                <view class="flex-grow-0" v-for="(item,index) in data.current_cat.list" :key="item.id">
                                    <navigator class="cat-item " :url="'/pages/list/list?cat_id='+item.id">
                                        <image class="cat-icon" :src="item.pic_url"></image>
                                        <view class="cat-name">{{item.name}}</view>
                                    </navigator>
                                </view>
                            </block>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <view id="catall" style="padding-top: 100upx;background: #fff;position:fixed;top:0;width:100%;z-index:40">
            <view v-if="data.dapp.cat_style==5">
                <scroll-view class="group-top scroll-view-x">
                    <view class="flex-row flex-y-center">
                        <view class="flex-grow-1">
                            <scroll-view class="scroll-view-x" :scrollIntoView="toView" :scrollLeft="scrollLeft" scrollWithAnimation="true" scrollX="true">
                                <view @tap="goodsAll" :class="['scroll-view-item', item.active?'active':'']" :data-index="index" :id="item.id" v-for="(item,index) in data.cat_list" :key="unique">{{item.name}}</view>
                            </scroll-view>
                        </view>
                    </view>
                </scroll-view>
                <view :hidden="data.current_cat.list==''?true:false">
                    <view class="flex-row" style="padding-bottom:14upx;overflow: auto;">
                        <view @tap="goodsItem" :class="['flex-grow-0 flex-y-center flex-x-center fs-sm view-item1', item.active?'view-item2':'']" :data-index="index" v-for="(item,index) in data.current_cat.list" :key="item.id">{{item.name}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view id="cat" :style="{paddingTop:new_catheight,background: '#fff',position:'fixed',top:'0',width:'100%',zIndex:'40'}">
            <view v-if="data.dapp.cat_style==-1&&data.current_cat.list!=data.undefault">
                <scroll-view class="group-top scroll-view-x">
                    <view class="flex-row flex-y-center">
                        <view class="flex-grow-1">
                            <scroll-view class="scroll-view-x" :scrollLeft="scrollLeft" scrollWithAnimation="true" scrollX="true">
                                <view @tap="goodsItem" :class="['scroll-view-item', item.active?'active':'']" :data-index="index" v-for="(item,index) in data.current_cat.list" :key="unique">{{item.name}}</view>
                            </scroll-view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view class="goods-list" :style="{paddingTop:(data.height+3)+'px',paddingBottom:upx_30}" v-if="data.dapp.cat_style==5||data.dapp.cat_style==-1">
            <view class="no-data-tip" v-if="data.show_no_data_tip">该类目暂无内容</view>
            <navigator class="goods-item" openType="navigate" :url="'/pages/goods/goods?id='+item.id" v-for="(item,index) in data.goods_list" :key="item.id">
                <image class="goods-pic" mode="aspectFill" :src="item.pic_url"></image>
                <view class="goods-info" style="padding:5upx 20upx;">
                    <text class="mb-10 text-more-2" style="height:2.8em;line-height:1.4;">{{item.name}}</text>
                    <view class="flex-row">
                        <view class="flex-grow-1" style="color:#ff334b">
                            <block v-if="item.is_negotiable!=1">￥</block>{{item.price}}</view>
                        <view class="flex-grow-0 fs-sm" style="color:#999;" v-if="data.__is_sales">已售{{item.sales}}</view>
                    </view>
                </view>
            </navigator>
        </view>
        <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center">
            <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
        </view>
    </view>
	<comp-footer v-bind="{data:data}"></comp-footer>
		
	</view>
</template>

<script>var myVue = {};
	var t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
    return typeof t;
	} : function(t) {
		return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
	}, a = !1, e = !1;
	export default {
		computed: {
			new_catheight() {
				return uni.upx2px(this.data.catheight) + 'px';
			},
			upx_30(){
				return uni.upx2px(30) + 'px';
			}
		},
		data() {
			return {
				data: {
					cat_list: [],
					sub_cat_list_scroll_top: 0,
					scrollLeft: 0,
					page: 1,
					cat_style: 0,
					height: 0,
					catheight: 120,
					current_cat: {}
				}
			};
		},
		onLoad: function(t) {myVue = this;
			console.log(this.data)
			var a = this;
			myVue.getApp.page.onLoad(a, t);
			var e = myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP), s = t.cat_id;
			void 0 !== s && s && (a.data.cat_style = e.cat_style = -1, myVue.getApp.core.showLoading({
				title: "正在加载",
				mask: !0
			}), a.childrenCat(s)), a.setData({
				dapp: e
			});
		},
		onShow: function() {
			myVue.getApp.page.onShow(this), myVue.getApp.core.hideLoading(), -1 !== this.data.cat_style && this.loadData();
		},
		onReachBottom: function() {
			myVue.getApp.page.onReachBottom(this);
			var t = this;
			a || 5 != myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP).cat_style && -1 != t.data.cat_style || t.loadMoreGoodsList();
		},
		methods:{
			loadData: function(t) {
        var a = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.DAPP);
        if ("" == a.data.cat_list || 5 != e.cat_style && 4 != e.cat_style && 2 != e.cat_style) {
            var s = myVue.getApp.core.getStorageSync(myVue.getApp.const.CAT_LIST);
            s && a.setData({
                cat_list: s,
                current_cat: null
            }), myVue.getApp.request({
                url: myVue.getApp.api.default.cat_list,
                success: function(t) {
                    0 == t.code && (a.data.cat_list = t.data.list, 5 === e.cat_style && a.goodsAll({
                        currentTarget: {
                            dataset: {
                                index: 0
                            }
                        }
                    }), 4 !== e.cat_style && 2 !== e.cat_style || a.catItemClick({
                        currentTarget: {
                            dataset: {
                                index: 0
                            }
                        }
                    }), 1 !== e.cat_style && 3 !== e.cat_style || (a.setData({
                        cat_list: t.data.list,
                        current_cat: null
                    }), a.getApp.core.setStorageSync(a.getApp.const.CAT_LIST, t.data.list)));
                },
                complete: function() {
                    a.getApp.core.stopPullDownRefresh();
                }
            });
        } else a.setData({
            cat_list: a.data.cat_list,
            current_cat: a.data.current_cat
        });
    },
	childrenCat: function(t) {
        var e = this;
        a = !1;
        e.data.page;
        myVue.getApp.request({
            url: myVue.getApp.api.default.cat_list,
            success: function(a) {
                if (0 == a.code) {
                    var s = !0;
                    for (var c in a.data.list) {
                        a.data.list[c].id == t && (s = !1, e.data.current_cat = a.data.list[c], a.data.list[c].list.length > 0 ? (e.setData({
                            catheight: 100
                        }), e.firstcat({
                            currentTarget: {
                                dataset: {
                                    index: 0
                                }
                            }
                        })) : e.firstcat({
                            currentTarget: {
                                dataset: {
                                    index: 0
                                }
                            }
                        }, !1));
                        for (var i in a.data.list[c].list) a.data.list[c].list[i].id == t && (s = !1, e.data.current_cat = a.data.list[c], 
                        e.goodsItem({
                            currentTarget: {
                                dataset: {
                                    index: i
                                }
                            }
                        }, !1));
                    }
                    s && e.setData({
                        show_no_data_tip: !0
                    });
                }
            },
            complete: function() {
                e.getApp.core.stopPullDownRefresh(), e.getApp.core.createSelectorQuery().select("#cat").boundingClientRect().exec(function(t) {
                    e.setData({
                        height: t[0].height
                    });
                });
            }
        });
    },
    catItemClick: function(t) {
        var a = this, e = t.currentTarget.dataset.index, s = a.data.cat_list, c = null;
        for (var i in s) i == e ? (s[i].active = !0, !1, c = s[i]) : s[i].active = !1;
        a.setData({
            cat_list: s,
            sub_cat_list_scroll_top: 0,
            current_cat: c
        });
    },
    firstcat: function(t) {
        var a = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], e = this, s = e.data.current_cat;
        e.setData({
            page: 1,
            goods_list: [],
            show_no_data_tip: !1,
            current_cat: a ? s : []
        }), e.list(s.id, 2);
    },
    goodsItem: function(t) {
        var a = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], e = this, s = t.currentTarget.dataset.index, c = e.data.current_cat, i = 0;
        for (var o in c.list) s == o ? (c.list[o].active = !0, i = c.list[o].id) : c.list[o].active = !1;
        e.setData({
            page: 1,
            goods_list: [],
            show_no_data_tip: !1,
            current_cat: a ? c : []
        }), e.list(i, 2);
    },
    goodsAll: function(a) {
        var e = this, s = a.currentTarget.dataset.index, c = e.data.cat_list, i = null;
        for (var o in c) o == s ? (c[o].active = !0, i = c[o]) : c[o].active = !1;
        if (e.setData({
            page: 1,
            goods_list: [],
            show_no_data_tip: !1,
            cat_list: c,
            current_cat: i
        }), void 0 === ("undefined" == typeof my ? "undefined" : t(my))) {
            var n = a.currentTarget.offsetLeft, r = e.data.scrollLeft;
            r = n - 80, e.setData({
                scrollLeft: r
            });
        } else c.forEach(function(t, s, i) {
            t.id == a.currentTarget.id && (s >= 1 ? e.setData({
                toView: c[s - 1].id
            }) : e.setData({
                toView: c[s].id
            }));
        });
        e.list(i.id, 1), myVue.getApp.core.createSelectorQuery().select("#catall").boundingClientRect().exec(function(t) {
            e.setData({
                height: t[0].height
            });
        });
    },
    list: function(t, e) {
        var s = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), a = !1;
        var c = s.data.page || 2;
        myVue.getApp.request({
            url: myVue.getApp.api.default.goods_list,
            data: {
                cat_id: t,
                page: c
            },
            success: function(e) {
                0 == e.code && (s.getApp.core.hideLoading(), 0 == e.data.list.length && (a = !0), 
                s.setData({
                    page: c + 1
                }), s.setData({
                    goods_list: e.data.list
                }), s.setData({
                    cat_id: t
                })), s.setData({
                    show_no_data_tip: 0 == s.data.goods_list.length
                });
            },
            complete: function() {
                1 == e && s.getApp.core.createSelectorQuery().select("#catall").boundingClientRect().exec(function(t) {
                    s.setData({
                        height: t[0].height
                    });
                });
            }
        });
    },
    loadMoreGoodsList: function() {
        var t = this;
        if (!e) {
            t.setData({
                show_loading_bar: !0
            }), e = !0;
            var s = t.data.cat_id || "", c = t.data.page || 2;
            myVue.getApp.request({
                url: myVue.getApp.api.default.goods_list,
                data: {
                    page: c,
                    cat_id: s
                },
                success: function(e) {
                    0 == e.data.list.length && (a = !0);
                    var s = t.data.goods_list.concat(e.data.list);
                    t.setData({
                        goods_list: s,
                        page: c + 1
                    });
                },
                complete: function() {
                    e = !1, t.setData({
                        show_loading_bar: !1
                    });
                }
            });
        }
    }
		}
	}
</script>

<style scoped>
.cat-list {
    background: #f7f7f7;
}
.user-info{
	height: 500upx!important;
}
.cat-list .cat-item {
    height: 106upx;
    text-align: center;
    border-left: 8upx solid transparent;
}

.cat-list .cat-item.active {
    background: #fff;
    color: #ff4544;
    border-left-color: #ff4544;
}

.cat-list .cat-item image {
    margin-right: 16upx;
}

.cat-list .cat-item .cat-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sub-cat-box {
    background: #fff;
}

.sub-cat-header {
    height: 106upx;
    padding-left: 24upx;
    margin-bottom: 0upx;
    transition: background 200ms;
}

.sub-cat-header.active {
    background: rgba(255,69,68,0.07);
}

.sub-cat-header>view {
    height: 100%;
}

.sub-cat-header navigator {
    height: 100%;
    padding: 0 24upx;
}

.sub-cat-header navigator image {
    margin-left: 14upx;
}

.sub-cat-list {
    flex-wrap: wrap;
}

.sub-cat-list .sub-cat-item {
    width: 33%;
    text-align: center;
    margin-bottom: 40upx;
}

.sub-cat-list .sub-cat-item image {
    margin-bottom: 8upx;
}

.sub-cat-list .sub-cat-item view {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cat-block {
    height: 160upx;
    background: #f7f7f7;
    margin-bottom: 20upx;
}

.cat-block>.flex-grow-1 {
    padding: 32upx;
}

.cat-block>.flex-grow-0 {
    padding: 0 20upx 0 0;
}

.cat-block .cat-image {
    width: 128upx;
    height: 128upx;
}

.cat-block-list.big .cat-block {
    height: 212upx;
}

.cat-block-list.big .cat-block>.flex-grow-1 {
    padding: 48upx;
}

.cat-block-list.big .cat-block>.flex-grow-0 {
    padding: 0 32upx 0 0;
}

.cat-block-list.big .cat-block .cat-image {
    width: 164upx;
    height: 164upx;
}

.cat-small-style {
    flex-wrap: wrap;
    padding-bottom: 115upx;
}

.device_iphone_x~.after-navber .cat-small-style {
    padding-bottom: 165upx;
}

.cat-small-style>.flex-grow-0 {
    text-align: center;
    margin: 40upx 0;
}

.cat-small-style.cat-num-3>.flex-grow-0 {
    width: 33.333333%;
}

.cat-small-style.cat-num-4>.flex-grow-0 {
    width: 25%;
}

.cat-small-style .cat-item .cat-icon {
    width: 92upx;
    height: 92upx;
}

.cat-small-style .cat-item .cat-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10upx;
}

.advert {
}

.advert image {
    width: 500upx;
    height: 184upx;
}

.search-icon image {
    width: 68upx;
    height: 68upx;
}

.search-icon {
    height: 92upx;
    padding: 0 24upx;
}

.scroll-view-x {
    background-color: #fff;
    white-space: nowrap;
    top: 0;
    z-index: 9999;
    border-bottom: 1upx solid #e2e2e2;
    height: 100upx;
}

.scroll-view-x .scroll-view-item {
    display: inline-block;
    margin: 22upx 17upx 21upx 17upx;
    padding: 0upx 26upx;
    color: #666666;
    height: 58upx;
    line-height: 58upx;
    white-space: nowrap;
}

.scroll-view-y {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.scroll-view-x .active {
    color: #ffffff;
    border-radius: 29upx;
    background-color: #ff4544;
    height: 58upx;
}

.view-item1 {
    border: 1upx solid #cccccc;
    color: #666666;
    height: 56upx;
    margin: 24upx 0upx 0upx 24upx;
    border-radius: 28upx;
    padding: 0upx 20upx;
}

.view-item2 {
    border: 1upx solid #ff4544;
    color: #ff4544;
}

.goods-item {
    width: 365upx;
    display: inline-block;
    position: relative;
    margin: 0 5upx;
    margin-bottom: 10upx;
    background: #fff;
}

.goods-item .goods-pic {
    width: 100%;
    height: 365upx;
}

.goods-item .goods-info {
    padding: 5upx 0;
}

.goods-item .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10upx;
    display: block;
    text-align: center;
}

.goods-item .goods-price {
    color: #f40;
    display: block;
    text-align: center;
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active {
    visibility: visible;
}
</style>
